<template>
	<view class="main">
		
		<view style="padding-left: 32rpx;padding-right: 32rpx;">
			<view style="height: 108rpx;display: flex;align-items: center;">
				<text class="title">工作日期<text class="star">*</text></text>
				
				<picker class="xuanze" mode="date" @change="dataChange">
					<view class="xuanze">
						<text :class="workData=='请选择日期' ? 'xuanze-t':'xuanze-tt'">{{workData}}</text>
						<image src="../../../../../static/phone/quxuanze.png" class="xuanze-i"></image>
					</view>
				</picker>
			
			</view>
			<view class="line"></view>
			
			<view style="height: 108rpx;display: flex;align-items: center;">
				<text class="title">工作时长<text class="star">*</text></text>
				<input type="digit" v-model="workDuration"
				placeholder="请输入 小时" class="placeholder-view">
			</view>
			<view class="line"></view>
			
			<view style="height: 108rpx;display: flex;align-items: center;">
				<text class="title">工作内容<text class="star">*</text></text>
			
			</view>
			
			<view style="display: flex;align-items: center;padding-top: 24rpx;padding-bottom: 24rpx;">
				<input type="text" v-model="tipsTv"
				placeholder="请输入" class="placeholder-view2" style="width: 550rpx;">
				
				<text class="title2" @click="showTips">常用语</text>
			</view>
			
			<view class="line"></view>

			<view style="height: 108rpx;display: flex;align-items: center;">
				
				<text class="title">工作律师<text class="star">*</text></text>
				<input type="text" @input="searchPeople"  :value="phone"
				placeholder="请输入律师姓名/手机号/工作组" class="placeholder-view">
			</view>
			<view class="line"></view>
			
			<scroll-view  scroll-y="true" class="laywer-sel-popup" v-if="searchList.length>0 && phone!=''">
				<view v-for="(item,index) in searchList" :key="index" @click="clickPeople(item)" 
				style="height: 80rpx;display: flex;align-items: center;margin-left: 32rpx;">
					<image :src="item.account.avatarPic"
						v-if="item.account.avatarPic!=null && item.account.avatarPic!=undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					
				<!-- 	<image src="../../../../../static/phone/moren.png"
						v-if="item.account.avatarPic==null || item.account.avatarPic==undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image> -->
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					
				</view>
			</scroll-view>
			
			<view class="listview" v-if="nameList.length>0">
				<view :class="index%2==1 ? 'main_item2':'main_item'" v-for="(item,index) in nameList">
					<image :src="item.account.avatarPic"
						v-if="item.account.avatarPic!=null && item.account.avatarPic!=undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image>
					
					<!-- <image src="../../../../../static/phone/moren.png"
						v-if="item.account.avatarPic==null || item.account.avatarPic==undefined"
						style="width: 40rpx;height: 40rpx;margin-left: 8rpx;border-radius: 40rpx;"></image> -->
					<text class="listview-name" style="margin-left: 2rpx;">{{item.account.realName}}</text>
					<text class="listview-name" style="margin-left: 4rpx;">{{item.account.mobile}}</text>
					<image @click="deleteLayer(item,index)" src="../../../../../static/phone/guanbi1.png"
						style="width: 32rpx;height: 32rpx;margin-left: auto;margin-right: 4rpx;"></image>
				</view>
			
			</view>
			
			
		</view>
		
		<!-- 底部 -->
		<view class="view-bottom">
			<view class="view-bottom-s">
				<view class="view-bottom-b" @click="addIt">
					提交
				</view>
			</view>
			<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
				<!-- 苹果x及以上的安全距离 -->
			<!-- </view> -->
		</view>
		
		
		<view class="zhezhao" v-if="isShowTips">
			<view class="zhezhao-view-bottom">
				<view class="zhezhao-view-bottom-s">
					<view class="zhezhao-view-bottom-s-t">
						<text class="zhezhao-view-bottom-s-t1">常用语</text>
						<text class="zhezhao-view-bottom-s-t2" @click="clickSet">设置</text>
					</view>
					
					<scroll-view style="height: 330rpx;" scroll-y="true">
						<view v-for="(item,index) in tipsList" :key="index" @click="clickTips(item)">
							<view class="tips-view">
								{{item.content}}
							</view>
							
						</view>
					</scroll-view>
					
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import verify from '../../../../utils/verifyUtils'
	let app = ''
	export default{
		data(){
			return{
				tag:'',//add 新增  edit 编辑
				item:null,
				role: '',
				roleUrl:'',
				caseId:'',
				needAdapt: false,
				workData:'请选择日期',
				isShowTips:false,
				tipsTv:'',
				tipsList:[],
				
				searchList:[],
				nameList:[],
				phone:'',
				
				staffIds:[],//提交时律师的Id集合
				workDate:'',//提交时工作日期
				workContent:'',//提交时工作内容
				workDuration:'',//工作时长
				
				id:'',//编辑用的id
			}
		},
		onLoad(options) {
			app = getApp()
			var _this = this
			console.log(_this.chooseList)
			_this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
			_this.caseId = options.caseId
			_this.roleUrl =  _this.$roleUrl({tab:_this.role})
			
			_this.tag = options.tag
			if(_this.tag == 'edit'){
				
				let item = JSON.parse(options.item)
				console.log('编辑',item)
				_this.id = item.id
				_this.workData = item.workDate
				_this.workDate = this.workData
				_this.tipsTv = item.workContent
				_this.workDuration = item.workDuration
				
				let list = item.lawyers
				for (var i = 0; i < list.length; i++) {
					_this.nameList.push(list[i])
				}
			}
			
			
		},
		onShow() {
			//获取常用语
			this.getPhrase()
		},
		methods:{
			/**
			 * 获取常用语
			 */
			async getPhrase(){
				let _this = this		
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/phrase/selector/0`,
					method: 'POST', //默认是GET
				})
				console.log('常用语',res)
						
				if(res.data.code==200){
					_this.tipsList = res.data.data
				}
				
			},
			
			/**
			 * 输入框监听
			 */
			searchPeople(val) {
				console.log(val)
				let _this = this
				let code = val.detail.value
				_this.phone = code
				if(code.length>0){
					//查询律师选择器
					_this.getNameList(code)
				}
				
		
			},
			/**
			 * 
			 */
			async getNameList(code) {
				console.log(code)
				let _this = this
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/lawyer/selector`,
					data: {
						keyword:code,
						// size: 1000,
						// page: 1
					},
					method: 'POST', //默认是GET
				})
				console.log('律师', res)
				if (res.data.code == 200) {
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						let avatarPic = list[i]['account']['avatarPic']
						if(verify.isNotEmpty(avatarPic)){
							if(avatarPic.indexOf('http')<0){
								avatarPic = this.$imageUrls({picUrls: avatarPic})
							}
						}else{
							avatarPic = '../../../../../static/phone/moren.png'
						}
						list[i]['account']['avatarPic']= avatarPic
					}
					_this.searchList = list
				}
			
			},
			/**
			 * 时间选择
			 */
			dataChange(val){
				console.log(val)
				this.workData = val.target.value
				this.workDate = this.workData
			},
			
			/**
			 * 点击查看常用语
			 */
			showTips(){
				this.isShowTips = true
			},
			/**
			 * 点击了常用语
			 */
			clickTips(val){
				console.log(val)
				this.isShowTips = false
				this.tipsTv = this.tipsTv+val.content
			},
			
			/**
			 * 点击了设置
			 */
			clickSet(){
				this.isShowTips = false
				uni.navigateTo({
					url:'../../commonPhrases/commonPhrases'
				})
			},
			
			/**
			 * @param {Object} item
			 * 工作律师选择
			 */
			clickPeople(item){
				this.nameList.push(item)
				this.searchList = []
				this.phone = ''
			},
			
			/**
			 * 删除工作律师
			 */
			deleteLayer(item, index) {
				this.nameList.splice(index, 1)
			},
			
			/**
			 * 提交
			 */
			async addIt(){
				let _this = this
				for (var i = 0; i < _this.nameList.length; i++) {
					 _this.staffIds.push(_this.nameList[i]['id'])
				}
				
				_this.workContent = _this.tipsTv
				if(_this.workDate==null || _this.workDate=='' ){
					uni.showToast({
						title:'请选择工作日期',
						icon:"none"
					})
					return
					
				}
				if(_this.workDuration==null || _this.workDuration=='' ){
					uni.showToast({
						title:'请填写工作时长',
						icon:"none"
					})
					return
					
				}
				if(_this.workContent==null || _this.workContent==''){
					uni.showToast({
						title:'请填写工作内容',
						icon:"none"
					})
					return
				}
				if(_this.staffIds.length==0){
					uni.showToast({
						title:'请填写工作律师',
						icon:"none"
					})
					return
				}
				
				uni.showLoading({
					title:'正在提交数据...'
				})
				
				
				let method = ''
				let data={}
				if(_this.tag == 'edit'){
					method = 'PUT'
					data={
						workDate: _this.workDate,
						workContent: _this.workContent,
						workDuration: _this.workDuration,
						staffIds: _this.staffIds,
						caseId:_this.caseId,
						id:_this.id
					}
				}else{
					method = 'POST'
					data={
						workDate: _this.workDate,
						workContent: _this.workContent,
						workDuration: _this.workDuration,
						staffIds: _this.staffIds,
						caseId:_this.caseId
					}
				}
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseWorkLog`,
					data: data,
					method:method, //默认是GET
				})
				uni.hideLoading()
				console.log('工作时间提交结果',res)
				if(res.data.code==200){
					uni.showToast({
						title:'操作成功!',
						icon:"success"
					})
					uni.navigateBack({
						delta:-1
					})
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}
				
				
			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>

<style scoped lang="scss">
	.title{
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #333333;
	}
	.star{
		color: #FF6132;
	}
	.line{
		height: 1rpx;
		background-color: #eeeeee;
	}
	.xuanze{
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	.xuanze-t{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
		margin-right: 5rpx;
	}
	.xuanze-tt{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-right: 5rpx;
	}
	.xuanze-i{
		width: 12rpx;
		height: 24rpx;
		margin-left:16rpx;
	}
	.placeholder-view{
		width: 430rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: auto;
		text-align: right;
	}
	.placeholder-view2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.title2{
		margin-left: auto;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
	}
	.view-bottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1px solid #E1E1E1;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	
	.view-bottom-s {
		height: 108rpx;
		display: flex;
		align-items: center;
	}
	
	.view-bottom-b {
		width: 686rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}
	
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.zhezhao-view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-top-right-radius: 16rpx;
		border-top-left-radius: 16rpx;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
	}
	.zhezhao-view-bottom-s{
		height: 430rpx;
	
	}
	.zhezhao-view-bottom-s-t{
		display: flex;
		align-items: center;
		height: 100rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.zhezhao-view-bottom-s-t1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
	}
	.zhezhao-view-bottom-s-t2{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2DA9C5;
		margin-left: auto;
	}
	.tips-view{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-bottom: 24rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	
	
	.listview {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 32rpx;
	
	}
	
	
	.main_item {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}
	
	.main_item2 {
		width: 336rpx;
		height: 88rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		margin-top: 16rpx;
		margin-left: 14rpx;
	}
	
	.listview-name {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}
	
	.laywer-sel-popup{
		height: 330rpx;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.2);
		border-radius: 2px;
	}
</style>